<template lang="html">
    <div class='order'>
        <div class='order_left'>
            <homeTop :active="2"></homeTop>
            <div class="secondaryRouterBox">
                <div class="secondaryRouterBoxNav" v-show="is_show">
                    <ul>
                        <li :class="act == '/index/order/allOrder' ? 'act' : ''"
                            @click="clickNav('/index/order/allOrder')">所有订单
                        </li>
                        <li :class="act == '/index/order/abnormalOrder' ? 'act' : ''"
                            @click="clickNav('/index/order/abnormalOrder')">异常订单
                        </li>
                        <li :class="act == '/index/order/serviceOrder' ? 'act' : ''"
                            @click="clickNav('/index/order/serviceOrder')">售后订单
                        </li>
                    </ul>
                </div>
                <div class="secondaryRouterBoxContent">
                    <router-view/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import homeTop from '../assembly/top'
    export default {
        components: {
            homeTop
        },
        name: "order",
        data() {
            return {
                act: "/index/order/allOrder",
                is_show: true
            };
        },
        created() {
            this.act = this.$route.path || "/index/order/allOrder";
        },
        updated() {

        },
        mounted() {
            let ro = this.$route.path.split("/");
            let len = ro.length;
            if (ro[len - 1] == "balance" || ro[len - 1] == "orderDetails") {
                this.is_show = false;
            }
        },
        watch: {
            $route: function(newVal) {

                switch (this.$route.path) {
                    case '/index/order/orderDetails':
                        this.act = '/index/order/allOrder';
                        break;
                    case '/index/order/apply':
                        this.act = '/index/order/allOrder';
                        break;
                    case '/index/order/abnormalDetails':
                        this.act = '/index/order/abnormalOrder';
                        break;
                    case '/index/order/serviceDetails':
                        this.act = '/index/order/serviceOrder';
                        break;
                    default:
                        this.act = this.$route.path;
                }

                let val = newVal.path.split("/");
                let len = val.length;
                if (val[len - 1] != "balance" || val[len - 1] == "orderDetails") {
                    this.is_show = true;
                }
            },
        },
        methods: {
            clickNav(url) {
                this.$router.push({
                    path: url
                })
            }
        },
    };
</script>

<style lang="scss" scoped>
    .order {
        display: flex;
        width: 100%;
        margin: 0 auto;
        /*cursor: pointer;*/
    }
    
    .order_left {
        width: 100%;
        min-width: 1020px;
    }
    
    .order_right {
        width: 100%;
        margin: 0 auto;
    }
</style>